import React, { useState } from 'react';
import { Space, Table, Tag, Button, message, Popconfirm, Modal,Input,Select, TimePicker  } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { SmileOutlined } from '@ant-design/icons';
import {async_delshezhi,async_getshezhi,async_updateshezhi} from '../../store/crmslice'
import dayjs from 'dayjs';
import Addlist from './Addlist';

const shezhi = () => {
    let obj=useSelector(state=>state.crms1)
    let dispatch=useDispatch()

    const [curren, setcurren] = useState(2);
    const [pageSize, setpageSize] = useState(3);
    const [total, settotal] = useState(obj.shezhilist.length);

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [title, settitle] = useState('添加');
    const [update, setupdate] = useState({});
    const showModal = () => {
      setIsModalOpen(true);
    };
    const handleCancel = () => {
      setIsModalOpen(false);
    };

    const columns = [
        {
          title: '参数主键',
          dataIndex: 'zhujian'
        },
        {
          title: '参数名称',
          dataIndex: 'name'
        },
        {
          title: '参数键名',
          dataIndex: 'jianming'
        },
        {
            title: '参数键值',
            dataIndex: 'jianzhi'
          },
          
        {
          title: '系统内置',
          dataIndex: 'neizhi',
          render: (neizhi,item) =>{
return <Tag color={neizhi?'blue':'green'} 
onClick={()=>{
    dispatch(async_updateshezhi({...item,neizhi:!item.neizhi}))
}}
>{neizhi?'是':'否'}</Tag>
          }
        },
        {
            title: '备注',
            dataIndex: '备注'
          },
          {
            title: '创建时间',
            dataIndex: 'time',
            render: (time) =>{
                return dayjs(time).format("YYYY-MM-DD HH:mm:ss")
                          }
          },
        {
          title: '操作',
          key: 'action',
          render: (_, record) => (
            <Space size="middle">
                <Button type="primary" onClick={()=>{
    showModal()
settitle('编辑')
setupdate(record)
}}>
        编辑
      </Button>
               <Popconfirm
    title="删除"
    description="确定删除?"
    onConfirm={()=>{
        dispatch(async_delshezhi(record.id))
    }}
    okText="确定"
    cancelText="取消"
  >
    <Button danger>删除</Button>
  </Popconfirm>
            </Space>
          ),
        },
      ];
    return <>

    <Space>
        <span>参数名称</span>
    <Input placeholder="请输入参数名称" style={{width:200}}/>
    <span>参数键名</span>
    <Input placeholder="请输入参数键名" style={{width:200}}/>
    <span>系统内置</span>
    <Select
    style={{width:200}}
    showSearch
    placeholder="系统内置"
    options={[
      {
        value: 'jack',
        label: 'Jack',
      },
      {
        value: 'lucy',
        label: 'Lucy',
      },
      {
        value: 'tom',
        label: 'Tom',
      },
    ]}
  />
  <span>创建时间</span>
  <TimePicker.RangePicker prefix={<SmileOutlined />} />
  <Button type="primary" >
        搜索
      </Button>
    </Space>
<br /><br />
<Button type="primary" onClick={()=>{
    showModal()
settitle('添加')
setupdate({})
}}>
        新增
      </Button>
      <Modal
        title={title}
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onCancel={handleCancel}
        footer={null}
      >
        <Addlist title={title} update={update} key={new Date().getTime()} onCancel={handleCancel}></Addlist>
      </Modal>
    
    <Table columns={columns} rowKey={'id'} dataSource={obj.shezhilist}
    pagination={{
        curren,
        pageSize,
        total,
        showQuickJumper:true,
        showSizeChanger:true,
        pageSizeOptions:[2,3,4,5],
        onChange:(page,pageSize)=>{
            setcurren(page)
            setpageSize(pageSize)
        }
    }}
    />
    </>
}
export default shezhi;